<template>
	<view class="page">
		<lexiconNavVue title="个人资料" :rightSave="true" @save="saveFn" />
		<!-- <view class="card">
			<view class="title">
				参赛照片｜Photo
			</view>
		</view> -->
		<view class="tabs">
			<view class="tab-item" :class="activeTab === 0 ? 'tab-item-active' : ''" @click="activeTab = 0">基础信息</view>
			<view class="tab-item" :class="activeTab === 1 ? 'tab-item-active' : ''" @click="activeTab = 1">详细信息</view>
		</view>
		<uv-form :model="userInfo" ref="form">
			<view class="card" v-if="activeTab === 0">
				<!-- <view class="item">
				<view class="title">姓名｜Chinese Name</view>
				<view class="input-box"><uv-input class="input" v-></uv-input></view>
			</view> -->
				<!--  :rules="rules" -->
				<uv-form-item prop="userInfo.user_name" class="item">
					<view class="title">姓名｜Chinese Name</view>
					<uv-input class="custom-input" v-model="userInfo.user_name" border="none"></uv-input>
				</uv-form-item>
				<uv-form-item prop="userInfo.en_name" class="item">
					<view class="title">手机号｜Phone</view>
					<uv-input class="custom-input" v-model="userInfo.phone" border="none" readonly></uv-input>
				</uv-form-item>
				<uv-form-item prop="userInfo.name" class="item">
					<view class="title">学校所在地｜School District</view>
					<!-- <uv-input class="custom-input" v-model="userInfo.name" border="none" readonly @click="open"></uv-input> -->
					<view class="custom-input" @click="openArea">
						{{chooseArea}}
					</view>
					<uv-icon class="arrow-right" name="arrow-right"></uv-icon>
				</uv-form-item>
				<uv-form-item prop="userInfo.school_name" class="item">
					<view class="title">学校名称｜School Name</view>
					<!-- <uv-input class="custom-input" v-model="userInfo.school_name" border="none"></uv-input> -->
					<view class="custom-input" @click="openSchool">
						{{chooseSchool}}
					</view>
					<uv-icon class="arrow-right" name="arrow-right"></uv-icon>
				</uv-form-item>
				<uv-form-item prop="userInfo.grade" class="item">
					<view class="title">年级｜Grade</view>
					<!-- <uv-input class="custom-input" v-model="userInfo.grade" border="none"></uv-input> -->
					<view class="custom-input" @click="openGradePicker">
						{{chooseGrade}}
					</view>
					<uv-icon class="arrow-right" name="arrow-right"></uv-icon>
				</uv-form-item>
				<uv-form-item prop="userInfo.classes" class="item">
					<view class="title">班级｜Class</view>
					<!-- <uv-input class="custom-input" v-model="userInfo.classes" border="none"></uv-input> -->
					<view class="custom-input" @click="openClassesPicker">
						{{userInfo.classes}}
					</view>
					<uv-icon class="arrow-right" name="arrow-right"></uv-icon>
				</uv-form-item>
				<!-- <uv-button type="primary" text="提交" customStyle="margin-top: 10px" @click="submit"></uv-button> -->
				<!-- <uv-button type="error" text="重置" customStyle="margin-top: 10px" @click="reset"></uv-button> -->
			</view>
			<view class="card" v-if="activeTab === 1">
				<uv-form-item prop="userInfo.en_name" class="item">
					<view class="title">英文名｜English Name</view>
					<uv-input class="custom-input" v-model="userInfo.en_name" border="none"></uv-input>
				</uv-form-item>
				<uv-form-item prop="userInfo.en_name" class="item">
					<view class="title">邮箱｜Email</view>
					<uv-input class="custom-input" v-model="userInfo.email" border="none"></uv-input>
				</uv-form-item>
				<uv-form-item prop="userInfo.sex" class="item">
					<view class="title">性别｜Gender</view>
					<!-- <uv-input class="custom-input" v-model="userInfo.sex" border="none"></uv-input> -->
					<view class="custom-input" @click="openSexPicker">
						{{chooseSex}}
					</view>
					<uv-icon class="arrow-right" name="arrow-right"></uv-icon>
				</uv-form-item>
				<uv-form-item prop="userInfo.card_type" class="item">
					<view class="title">证件类型｜Card Type</view>
					<!-- <uv-input class="custom-input" v-model="userInfo.card_type" border="none"></uv-input> -->
					<view class="custom-input" @click="openCardType">
						{{chooseCardType}}
					</view>
					<uv-icon class="arrow-right" name="arrow-right"></uv-icon>
				</uv-form-item>
				<uv-form-item prop="userInfo.id_card" class="item">
					<view class="title">证件号码｜Card Number</view>
					<uv-input class="custom-input" v-model="userInfo.id_card" border="none"></uv-input>
				</uv-form-item>
			</view>
		</uv-form>
		<!-- 地址选择 -->
		<uv-picker ref="areaPicker" :columns="addressList" :defaultIndex="pickerValue" keyName="name" @change="change"
			@confirm="confirmArea">
		</uv-picker>

		<!-- 性别等其他选择 -->
		<uv-picker ref="picker" :columns="columns" @confirm="confirm"></uv-picker>
	</view>
</template>

<script>
	const cityData = require('../../../static/js/city.js').cityData
	export default {
		data() {
			return {
				activeTab: 0,
				userInfo: {
					id: '',
					user_name: '',
					username: '',
					avatar: '',
					sign: '',
					sex: '',
					en_name: '',
					card_type: '',
					classes: '',
					email: '',
					phone: '',
					grade: '',
					id_card: '',
					school_name: '',
					province: '',
					province_code: '',
					city: '',
					city_code: '',
					area: '',
					area_code: '',
					identity: 0
				},


				// rules: {
				// 	'userInfo.name': {
				// 		type: 'string',
				// 		required: true,
				// 		message: '请填写姓名',
				// 		trigger: ['blur', 'change']
				// 	},
				// 	'userInfo.sex': {
				// 		type: 'string',
				// 		max: 1,
				// 		required: true,
				// 		message: '请选择男或女',
				// 		trigger: ['blur', 'change']
				// 	},
				// },
				provinces: [], //省
				citys: [], //市
				areas: [], //区
				pickerValue: [0, 0, 0],
				defaultValue: [0, 0, 0],
				columns: [],
				chooseSex: '',
				chooseCardType: '',
				chooseGrade: '',
				chooseArea: '',
				chooseSchool: '',
				pickerType: 1, // 1-性别 2-证件类型 3-年级 4-班级 5-学校

			}
		},
		computed: {
			addressList() {
				return [this.provinces, this.citys, this.areas];
			}
		},
		onLoad() {
			this.getUserInfo()
		},
		methods: {
			getUserInfo() {
				var that = this;
				uni.showLoading();
				this.$http.getUserInfo().then(res => {
					if (res.code === 200) {
						uni.hideLoading();
						// res.data
						// for (let key in this.userInfo) {
						// 	this.userInfo[key] = res.data[key]
						// }
						this.userInfo = res.data
						if (res.data.province) {
							this.chooseArea = res.data.province + '/' + res.data.city + '/' + res.data.area
							this.defaultValue[0] = res.data.province_code
							this.defaultValue[1] = res.data.city_code
							this.defaultValue[2] = res.data.area_code
							console.log(this.defaultValue)
						}
						this.chooseSex = this.$util.genders().find(item => item.id === this.userInfo.sex) ? this
							.$util.genders().find(item => item.id === this.userInfo.sex).name : ''
						this.chooseCardType = this.$util.cardType().find(item => item.id === this.userInfo
							.card_type) ? this.$util.cardType().find(item => item.id === this.userInfo
							.card_type).name : ''
						this.chooseGrade = this.$util.gradeData().find(item => item.dictValue === this.userInfo
							.grade) ? this.$util.gradeData().find(item => item.dictValue === this.userInfo
							.grade).dictLabel : ''
						// chooseArea: '',
						this.chooseSchool = this.userInfo.school_name

						console.log('哈哈--')
						console.log(this.userInfo)
					} else {
						uni.showToast({
							title: '数据异常，请稍后再试',
							icon: 'none'
						})
					}
				})
			},
			saveFn() {
				this.userInfo.username = this.userInfo.user_name
				this.userInfo.avatar = this.userInfo.avatar
				this.userInfo.sign = this.userInfo.sign

				if (this.userInfo.id == '') {
					uni.showToast({
						title: '数据异常，请稍后再试',
						icon: 'none'
					})
					return false;
				}

				// for (let key in this.userInfo) {
				// 	if (key != 'avatar') {
				// 		if (!this.userInfo[key]) {
				// 			return uni.showToast({
				// 				title: '请完善信息',
				// 				icon: 'none'
				// 			})
				// 			break
				// 		}
				// 	}
				// }
				if (!this.userInfo.username) {
					return uni.showToast({
						title: '请填写姓名',
						icon: 'none'
					})
				}

				if (!this.userInfo.province_code || !this.userInfo.city_code || !this.userInfo.area_code) {
					return uni.showToast({
						title: '请选择学校所在地',
						icon: 'none'
					})
				}
				if (!this.userInfo.school_name || !this.userInfo.school_id) {
					return uni.showToast({
						title: '请选择学校',
						icon: 'none'
					})
				}
				if (!this.userInfo.grade) {
					return uni.showToast({
						title: '请选择年级',
						icon: 'none'
					})
				}
				if (!this.userInfo.classes) {
					return uni.showToast({
						title: '请选择班级',
						icon: 'none'
					})
				}

				let emailReg = /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/;
				if (this.userInfo.email && !emailReg.test(this.userInfo.email)) {
					return uni.showToast({
						title: '邮箱格式不正确',
						icon: 'none'
					})
				}

				// let idCardReg = /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i;
				// if (!emailReg.test(this.userInfo.id_card)) {
				// 	return uni.showToast({
				// 		title: '身份证号格式不正确',
				// 		icon: 'none'
				// 	})
				// }



				console.log('用户信息')
				console.log(this.userInfo)
				this.$http.saveUserInfo(this.userInfo).then(res => {
					if (res.code === 200) {
						uni.showToast({
							title: '保存成功',
							icon: 'none'
						})
						uni.setStorageSync("USER_INFO", JSON.stringify(this.userInfo))
						uni.setStorageSync('infoCompleted', '1');
						uni.$emit("userInfoChange", true)
						// uni.switchTab({
						// 	url: "/pages/tabbar/userCenter/index"
						// })
					}
				})

			},
			openArea() {
				this.handlePickValueDefault()
				this.$refs.areaPicker.open();
			},
			handlePickValueDefault() {
				this.provinces = cityData
				// if (this.pickerValue.find(id => id > 0)) {
				// 设置省
				const provinceIndex = this.provinces.findIndex(item => item.id === this.defaultValue[0])
				const cityIndex = this.citys.findIndex(item => item.id === this.defaultValue[1])
				const areaIndex = this.areas.findIndex(item => item.id === this.defaultValue[2])

				this.pickerValue[0] = provinceIndex > -1 ? provinceIndex : 0
				// 设置市
				this.citys = this.provinces[this.pickerValue[0]]?.areas || [];
				this.pickerValue[1] = cityIndex > -1 ? cityIndex : 0
				// 设置区
				this.areas = this.citys[this.pickerValue[1]]?.areas || [];
				this.pickerValue[2] = areaIndex > -1 ? areaIndex : 0
				// 重置下位置
				this.$refs.areaPicker.setIndexs([this.pickerValue[0], this.pickerValue[1], this.pickerValue[2]], true);
				// } else {
				// 	this.citys = this.provinces[0]?.areas
				// 	this.areas = this.citys[0]?.areas
				// }
				console.log(this.pickerValue, this.defaultValue)
			},
			change(e) {
				const {
					columnIndex,
					index,
					indexs
				} = e
				// 改变了省
				if (columnIndex === 0) {
					this.citys = this.provinces[index]?.areas || []
					this.areas = this.citys[0]?.areas || []
					this.$refs.areaPicker.setIndexs([index, 0, 0], true)
				} else if (columnIndex === 1) {
					this.areas = this.citys[index]?.areas || []
					this.$refs.areaPicker.setIndexs(indexs, true)
				}
			},
			confirmArea(e) {
				console.log('确认选择的地区：', e);
				this.chooseArea = `${e.value[0].name}/${e.value[1].name}/${e.value[2].name}`
				this.userInfo.province = e.value[0].name
				this.userInfo.province_code = e.value[0].id
				this.userInfo.city = e.value[1].name
				this.userInfo.city_code = e.value[1].id
				this.userInfo.area = e.value[2].name
				this.userInfo.area_code = e.value[2].id
				this.getSchoolList(e.value[0].id, e.value[1].id, e.value[2].id)
				this.userInfo.school_name = ''
				this.chooseSchool = ''
			},

			// 获取学校
			getSchoolList(provinceCode, cityCode, areaCode) {
				const data = {
					provinceCode,
					cityCode,
					areaCode
				}
				this.$http.getSchoolList(data).then(res => {
					if (res.code === 200) {
						this.schoolList = res.data
					}
				})
			},
			confirm(e) {
				switch (this.pickerType) {
					case 1:
						this.chooseSex = e.value[0]
						this.userInfo.sex = this.$util.genders().find(item => item.name === this.chooseSex).id
						break;
					case 2:
						this.chooseCardType = e.value[0]
						this.userInfo.card_type = this.$util.cardType().find(item => item.name === this.chooseCardType).id
						break;
					case 3:
						this.chooseGrade = e.value[0]
						this.userInfo.grade = this.$util.gradeData().find(item => item.dictLabel === this.chooseGrade)
							.dictValue
						break;
					case 4:
						this.userInfo.classes = e.value[0]
						break;
					case 5:
						this.chooseSchool = e.value[0]
						this.userInfo.school_name = this.chooseSchool
						this.userInfo.school_id = this.schoolList.find(item => item.schoolName === this.chooseSchool).id
						break;
				}
			},
			openSexPicker() {
				this.columns = []
				const list = this.$util.genders().map(item => item.name)
				this.columns.push(list)
				this.pickerType = 1
				this.$refs.picker.open()
			},
			openCardType() {
				this.columns = []
				this.pickerType = 2
				const list = this.$util.cardType().map(item => item.name)
				this.columns.push(list)
				this.$refs.picker.open()
			},
			openGradePicker() {
				this.columns = []
				this.pickerType = 3
				const list = this.$util.gradeData().map(item => item.dictLabel)
				this.columns.push(list)
				this.$refs.picker.open()
			},
			openClassesPicker() {
				this.columns = []
				let arr = []
				for (let i = 0; i < 30; i++) {
					arr.push(i + 1)
				}
				this.columns.push(arr)
				this.pickerType = 4
				this.$refs.picker.open()
			},
			openSchool() {
				this.columns = []
				this.columns.push(this.schoolList.map(item => item.schoolName))
				this.pickerType = 5
				this.$refs.picker.open()
			}
		}
	}
</script>

<style lang="less">
	.page {
		width: 100%;
		height: 100vh;
		// min-height: 100vh;
		overflow-y: auto;
		background-color: #fff8e1;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.card {
		background: linear-gradient(to bottom, #130e00, #373632);
		margin: 18px 12px;
		min-height: 100px;
		border-radius: 20px;
		padding: 18px 24px;

		.title {
			color: #fff;
			font-size: 14px;
			font-weight: bold;
			border-bottom: 2px solid #ffd52e;
			padding-right: 20px;
			display: inline-block;
			margin-bottom: 18px;
		}
	}

	.item {
		position: relative;
	}

	.item ::v-deep .uv-form-item__body__right__content__slot {
		display: block;
	}

	.item ::v-deep .uv-input--square {
		border-radius: 32px;
	}

	.custom-input {
		background: #fff8e1;
		border-radius: 32px;
		height: 32px;
		padding-left: 12px !important;
		padding-right: 12px !important;
		font-size: 14px;
		font-weight: bold;
		line-height: 32px;
	}

	.arrow-right {
		position: absolute;
		top: 58px;
		right: 14px;
	}

	.arrow-right ::v-deep .uv-icon__icon {
		color: #130e00;
	}

	.tabs {
		margin-bottom: 24px;
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding-top: 24px;

		.tab-item {
			width: 120px;
			height: 28px;
			font-family: hzgb;
			font-size: 14px;
			color: #fff;
			text-align: center;
			line-height: 28px;
			border-radius: 28px;
			background: linear-gradient(to bottom, #130e00, #373632);
			box-shadow: 0 6px 0 0 #9b8b6f;
		}

		.tab-item-active {
			background: linear-gradient(to bottom, #ffd16b, #fff497);
			box-shadow: 0 6px 0 0 #d9b059;
			color: #000;
		}
	}
</style>